<template>
  <div class="box">
    <h2>子组件 add</h2>
    从vuex中获取的值:<label>{{$store.state.count}}</label>
    <br />
    <button @click="add">值+1</button>
    <button @click="add10">值+10</button>
    <button @click="async20">1s后值+20</button>
    <ul>
      <li v-for="item in showlist" :key="item">{{}}</li>
    </ul>
  </div>
</template>

<script>
import { mapMutations,mapActions, mapGetters } from 'vuex'
export default {
  name: 'AddItem',
  methods:{
    ...mapMutations(['addNum']),
    ...mapActions(['asyncAdd']),
    add(){
      this.$store.commit('addCount')
    },
    add10(){
      // this.$store.commit('addNum',10)
      this.addNum(10)
    },
    async20(){
      //不要去触发异步的
      // this.$store.dispatch('asyncAdd',20)
      this.asyncAdd(20)
    }
  },
  computed:{
    ...mapGetters(['showList'])
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>